/*
 * @Author: 何善万 swhe@che300.com
 * @Date: 2023-11-06 10:34:55
 * @LastEditors: 何善万 swhe@che300.com
 * @LastEditTime: 2024-10-23 13:36:07
 * @FilePath: \my-notion-redux\src\routers.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useState, useMemo } from "react";
import classNames from "classnames";
import { connect, useSelector } from "react-redux";
import { useTranslation } from "react-i18next";
import { storageData } from "@tools/utils";
import { THEME_COLOR_TYPE, LANGUAGE_TYPE } from "@tools/constants";
import { setGlobalCommon } from "../../../redux/slices/global";
import { useAppDispatch } from "../../../redux/store";
import PrintText from "@/pages/components/print_text";
import * as styles from "../styles/menu.less";
import * as commonStyles from "@/index.less";

function JobMenu(props) {
  const themeArr = [
    {
      type: "blue-green",
      color: "#A0D2DB",
    },
    {
      type: "gray",
      color: "#999999",
    },
    {
      type: "default",
      color: "#B2D8B2",
    },
    {
      type: "neutral",
      color: "#EFE8DE",
    },
    
    {
      type: "blue",
      color: "#007BFF",
    },
    {
      type: "orange",
      color: "#FF5733",
    },
  
  ];
  const [themeColor, setThemeColor] = useState("default");
  const { isShowMenu, language } = useSelector((state) => state.global);
  const { setThemeColor: commonSetThemeColor, changeLanguage } = useSelector(
    (state) => state.commonFun
  );
  const dispatch = useAppDispatch();
  const { t } = useTranslation();

  const hanldeChangeLanguage = language => {
    changeLanguage(language)
}

  useEffect(() => {
    let theme = storageData(THEME_COLOR_TYPE);
    setThemeColor(theme || "default");
  }, []);

  const handleCloseMenu = () => {
    dispatch(setGlobalCommon({ isShowMenu: false }));
  };

  const setTheme = (theme) => {
    setThemeColor(theme || "default");
    commonSetThemeColor(theme);
  };

 
  let language_value = language || storageData(LANGUAGE_TYPE)

  return (
    <div
      className={classNames(
        styles.job_menu,
        isShowMenu ? styles.open_menu : ""
      )}
    >
      {/* 关闭按钮 */}
      <i
        className={classNames(commonStyles.iconfont, styles.close_icon)}
        onClick={() => handleCloseMenu()}
      >
        &#xe634;
      </i>


      <div
        className={classNames(
          styles.content,
          // isShowMenu ? styles.content_active : ""
        )}
      >
        {/* 切换主题图标 */}
        <div>
          <div className={styles.name}>
            <span>
              {/* 切换主题颜色 */}
              {t("switch_theme_color")}
            </span>
            <i className={classNames(commonStyles.iconfont, styles.theme_icon)}>
              &#xe97e;
            </i>
          </div>
          <div className={styles.theme_arr}>
            {themeArr.map((item) => {
              return (
                <div
                  key={item.type}
                  className={classNames(
                    styles.theme_item,
                    themeColor === item.type ? styles.active : ""
                  )}
                  style={{ backgroundColor: item.color }}
                  onClick={() => {
                    setTheme(item.type);
                  }}
                ></div>
              );
            })}
          </div>
        </div>

        <div>
          <div className={styles.name}>
            <span>
              {/* 切换语言 */}
              {t("switch_language")}
            </span>
            <i className={classNames(commonStyles.iconfont, styles.theme_icon)}>
              &#xe631;
            </i>
          </div>
          <div className={styles.theme_arr}>
              <input type="radio" name="language" value="zh" checked={language_value === 'zh'} onChange={e => hanldeChangeLanguage(e.target.value)} />
              <label for="chinese">中文</label><br />
              <input type="radio" name="language" checked={language_value === 'en'} onChange={e=> hanldeChangeLanguage(e.target.value)} value="en" />
              <label for="english">English</label><br />
          </div>
        </div>
      </div>
    </div>
  );
}

function mapStateToProps(state) {
  return {
    ...state,
  };
}

export default connect(mapStateToProps)(JobMenu);
